<script setup>
import { ref } from 'vue'
import AddOrUpdateAirDataDialog from '@/components/AddOrUpdateAirDataDialog/index.vue'
import DeleteAirDataPrompt from '@/components/DeleteAirDataPrompt/index.vue'
import { getAirDataList, listDistrict } from '@/api/air.js'
import { FilterMatchMode } from 'primevue/api'

// 选择区域
const selectedDistrict = ref(null)

// 区域列表
const districtList = ref([])

// 空气质量信息数据列表
const airDataList = ref([])

// 表格渲染数据懒加载
const loading = ref(false)

// 分页参数
const pageVO = ref({
  page: 1,
  size: 10,
  districtId: null
})

// 总记录数，默认为未定义时的值长度。
const total = ref(null)

// 显示新增or修改对话框,默认隐藏
const showAddOrUpdateDialog = ref(false)

// 对话框标题
const dialogTitle = ref('新增')

// 新增传递的空气质量信息
const airDataProfile = ref({})

// 确认删除提示dialog,默认隐藏
const showDeleteDialog = ref(false)

// 空气数据id
const airId = ref(null)

/**
 * 获取区域列表
 */
const getDistrictData = () => {
  listDistrict().then(res => {
    if (res.code === 0) {
      districtList.value = res.data
    }
  })
}
// 调用获取区域列表的方法
getDistrictData()

/**
 * 添加空气质量信息
 */
const clickAddAirData = () => {
  // 1.打开新增空气质量信息的对话框
  showAddOrUpdateDialog.value = true

  // 2.设置新增空气质量信息的标题
  dialogTitle.value = '添加空气质量信息'

  // 3.空气质量资料
  airDataProfile.value = {
    monitorTime: new Date()
  }
}

/**
 * 搜索功能
 */
const filters = ref({
  'global': { value: null, matchMode: FilterMatchMode.CONTAINS }
})

/**
 * 获取空气质量信息列表
 */
const getAirQualityData = () => {
  // 1.开启懒加载
  loading.value = true

  // 2.调用后端接口,获取接口数据
  getAirDataList(pageVO.value).then(res => {
    if (res.code === 0) {
      // 3.赋值
      airDataList.value = res.data
      total.value = res.total
    }
  })

  // 4.关闭懒加载
  loading.value = false
}
// 调用获取空气质量信息的方法
getAirQualityData()

/**
 * 下拉列表选择查询事件
 */
const selectedChange = (event) => {
  if (event.value !== null) {
    pageVO.value.districtId = event.value.id
  } else {
    pageVO.value.districtId = null
  }
  getAirQualityData()
}

/**
 * 修改空气质量信息
 * @param row 待修改的空气质量信息
 */
const updateAirData = (row) => {
  // 1.打开修改空气质量信息对话框
  showAddOrUpdateDialog.value = true

  // 2.设置对话框标题
  dialogTitle.value = '修改空气质量信息'

  // 3.传递数据
  airDataProfile.value = { ...row }
}

/**
 * 删除空气质量信息
 * @param deleteRow 待删除的空气质量信息
 */
const confirmDeleteAirData = (deleteRow) => {
  // 1.打开删除的Dialog
  showDeleteDialog.value = true

  // 2.将空气质量Id传递给子组件
  airId.value = deleteRow.id
}

/**
 * 添加成功后，重置数据，防止第二次点击新增Dialog残留数据
 */
const clearAirData = () => {
  airDataProfile.value = {}
}

/**
 * 刷新空气数据信息
 */
const refreshAirDataList = () => {
  getAirQualityData()
}
</script>

<template>
  <div class="p-card">
    <!--*****下拉选择区域、新增空气质量信息按钮*****start-->
    <div class="card">
      <Toolbar style="margin: 20px 0 10px 0;">
        <template #end>
          <Button icon="pi pi-plus" class="mr-2" severity="help" @click="clickAddAirData" />
        </template>
      </Toolbar>
    </div>
    <!--*****下拉选择区域、新增空气质量信息按钮*****end-->

    <!--*****空气质量信息列表*****start-->
    <div class="card">
      <DataTable
        dataKey="id"
        filterDisplay="row"
        tableStyle="min-width: 50rem;"
        :value="airDataList"
        :filters="filters"
        :loading="loading"
        :row-hover="true"
        :paginator="true"
        :rows="pageVO.size"
        :totalRecords="total"
        :rowsPerPageOptions="[5,10,20]"
        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
        currentPageReportTemplate="显示 {first} 到 {last} 共计 {totalRecords} 条记录"
      >
        <!--*****查询和搜索*****start-->
        <template #header>
          <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
            <h3 class="mb-2 md:m-0 md:align-self-center">空气质量监测信息库</h3>
            <div style="display: flex;">
              <Dropdown
                style="margin-right: 1rem;"
                v-model="selectedDistrict"
                :options="districtList"
                @change="selectedChange"
                :show-clear="true"
                optionLabel="name"
                placeholder="按照区域查询"
                class="w-full md:w-15rem" />
              <IconField iconPosition="left">
                <InputIcon>
                  <i class="pi pi-search" />
                </InputIcon>
                <InputText class="w-full md:w-15rem" v-model.trim="filters['global'].value"
                           placeholder="键入关键字搜索..." />
              </IconField>
            </div>
          </div>
        </template>
        <!--*****查询和搜索*****end-->
        <Column field="id" header="序号"></Column>
        <Column field="districtName" header="区域"></Column>
        <Column field="monitorTime" header="监测时间"></Column>
        <Column field="pm10" header="PM10数据"></Column>
        <Column field="pm25" header="PM2.5数据"></Column>
        <Column field="monitoringStation" header="监测站"></Column>
        <Column field="lastModifyTime" header="最后修改时间"></Column>
        <Column>
          <template #body="slotProps">
            <Button
              icon="pi pi-pencil"
              class="p-button-rounded p-button-success mr-2"
              @click="updateAirData(slotProps.data)"
            />
            <Button
              icon="pi pi-trash"
              class="p-button-rounded p-button-danger"
              @click="confirmDeleteAirData(slotProps.data)"
            />
          </template>
        </Column>
      </DataTable>
    </div>
    <!--*****空气质量信息列表*****end-->

    <!--*****新增or修改空气质量信息*****start-->
    <AddOrUpdateAirDataDialog
      :header="dialogTitle"
      :air-data-info="airDataProfile"
      @clearAirData="clearAirData"
      @refreshAirDataList="refreshAirDataList"
      v-model="showAddOrUpdateDialog">
    </AddOrUpdateAirDataDialog>
    <!--*****新增or修改空气质量信息*****end-->

    <!--*****确认删除提示框*****start-->
    <DeleteAirDataPrompt
      :id="airId"
      @refreshAirDataList="refreshAirDataList"
      v-model="showDeleteDialog" />
    <!--*****确认删除提示框*****end-->
  </div>
</template>

<style scoped>

</style>